<template>
	<!-- 消息中心 -->
	<view class="" style="">
		<view class="sousuo">
			<view class="first-box" v-for="(item,index) in messages" :key="item.Id" @click="projectdetail">
				<view class="first-box-1">
					<view class="text-s">
						<view v-if="item.IsRead == false" class="point"></view>消息通知
					</view>
					<view class="text-r">{{item.CreateTime}}</view>
				</view>
				<view class="first-box-2">
					<view>{{item.MessageInfo}}</view>
				</view>
			</view>
		</view>

		<view class="">
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	const app = getApp()

	import {
		Base_MessageRecord, //消息中心
	} from '../interface.js'
	export default {
		data() {
			return {
				status: 'loading', // 加载状态
				finished: false,
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '已全部加载'
				},
				userInfo: app.globalData.userInfo,
				token: '',
				Total: 0,
				PageIndex: 1,
				PageRows: 3,
				finished: false,
				refresh: false,
				keyword: "",
				messages: [], //消息列表
			}
		},
		onShow() {
			this.GetMessageRecordsListData(false); //獲取消息数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			// // 重置相关参数
			// // 加载
			// this.Status = "loading"
			// this.receiptListData = []
			// this.pagination.PageIndex = 1
			// // 重新获取查询数据
			// this.getDataList()
			// uni.stopPullDownRefresh(); //停止刷新
		},
		// 上拉加载更多
		onReachBottom() {
			console.log('上啦加载更多', this.PageIndex, this.PageRows, this.messages, this.messages.length)
			if (this.PageIndex * this.PageRows >= this.Total) {
				this.status = 'noMore' // 暂停加载  没有更多了
				this.contentText.contentnomore = "已全部加载"
				return
			}
			this.GetMessageRecordsListData(true)
		},
		methods: {
			getRefresh() {
				this.PageIndex = 1
				this.GetMessageRecordsListData(false)
			},
			GetMessageRecordsListData(refresh) {
				var that = this
				this.status = 'loading'
				let params = {
					PageIndex: this.PageIndex,
					PageRows: this.PageRows,
					"SortField": "CreateTime",
					"SortType": "Desc",
					"Search": {
						"Condition": "ReceiverId",
						"Keyword": app.globalData.userInfo.Id
					}
				}
				Base_MessageRecord(params).then(
					res => {

						if (res.Success) {
							if (res.Data.length == 0) {
								setTimeout(function() {
									that.status = 'noMore'
									that.contentText.contentnomore = "已全部加载"
								}, 500)
								return
							}
							this.Total = res.Total
							this.messages = res.Data
							if (refresh) {
								if (this.messages.length >= this.Total) {
									setTimeout(function() {
										that.status = 'noMore'
										that.contentText.contentnomore = "已全部加载"
									}, 500)
									return
								} else {
									this.PageIndex += 1
									that.status = 'loading'
									that.contentText.contentnomore = "上拉显示更多" 
									setTimeout(function() {
										that.messages = that.messages.concat(res.Data)
									}, 500)

								}
							} else {
								setTimeout(function() {
									that.status = 'noMore'
									that.contentText.contentnomore = "上拉显示更多"
								}, 500)
							}
						}
					},
					error => {

					})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.image {
		width: 40rpx;
	}

	.center {
		text-align: center;
	}

	.first-box {
		width: 100%;
		margin: 25rpx auto;
		background-color: #ffffff;
		font-size: 30rpx;
		padding: 25rpx;
	}

	.first-box-1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.first-box-2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333333;
		padding-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.first-box-2 image {
		width: 30rpx;
		height: 30rpx;
	}

	.text-s {
		width: 550rpx;
		height: 35rpx;
		line-height: 35rpx;
		overflow: hidden;
	}

	.first-box-2-right {
		width: 180rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.first-box-1 .text-s {
		width: 550rpx;
		line-height: 35rpx;
		overflow: hidden;
		font-weight: 600;
	}

	.point {
		width: 12rpx;
		height: 12rpx;
		background-color: red;
		border-radius: 6rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.first-box-1 .text-r {
		float: right;
		line-height: 35rpx;
		font-size: 24rpx;
		color: #9F9F9F;
		padding-right: 40rpx;
	}
</style>